<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <!-- separator="/" 表示路径分隔符为"/" -->
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <!-- 点击首页可以回到路径为'/'的页面下 -->
            <el-breadcrumb-item>排班管理</el-breadcrumb-item>
            <el-breadcrumb-item>班组设置</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->

        <!--  搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryCalTeam" class="demo-form-inline">
            <el-form-item label="班组类型">
                <el-select v-model="queryCalTeam.calendarType" placeholder="请选择班组类型">
                    <el-option label="注塑" value="注塑" />
                    <el-option label="机加工" value="机加工" />
                    <el-option label="组装" value="组装" />
                    <el-option label="仓库" value="仓库" />
                    <el-option label="后整理" value="后整理" />
                </el-select>
            </el-form-item>
            <el-form-item label="班组编号">
                <el-input v-model="queryCalTeam.teamCode" placeholder="请输入班组编号" clearable />
            </el-form-item>
            <el-form-item label="班组名称">
                <el-input v-model="queryCalTeam.teamName" placeholder="请输入班组名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadCalTeams"><el-icon>
                        <Search />
                    </el-icon>搜索</el-button>
                <el-button @click="clearCalTeam"><el-icon>
                        <Refresh />
                    </el-icon>重置</el-button>
            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->

        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button @click="this.addCalTeamDialogVisible = true" type="primary" plain>
                <el-icon>
                    <Plus />
                </el-icon>
                新增
            </el-button>
            <el-button type="success" @click="handlerEdits" plain>
                <el-icon>
                    <EditPen />
                </el-icon>
                修改
            </el-button>
            <el-button @click="deleteCalTeams" type="danger" plain>
                <el-icon>
                    <Delete />
                </el-icon>
                删除
            </el-button>
            <el-button type="warning" @click="exportCalTeam" plain>
                <el-icon>
                    <Download />
                </el-icon>
                导出
            </el-button>
        </div>
        <!-- 工具栏结束 -->

        <!-- 班组表格 开始 -->
        <el-table ref="calTeamTable" :data="calTeams" max-height="800px" stripe="true" border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="班组ID" property="teamId" />
            <el-table-column align="center" label="班组编号" property="teamCode" />
            <el-table-column align="center" label="班组名称" property="teamName" />
            <el-table-column align="center" label="班组类型" property="calendarType">
                <template #default="scope">
                    <el-link>{{ scope.row.calendarType }}</el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="备注" property="remark" />
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 班组表格 结束 -->

        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="calTeamLimit" :pager-count="calTeamCurrPage"
            @current-change="changePage" background layout="prev, pager, next" :total="calTeamTotal" />
        <!-- 分页栏结束 -->


        <!-- 添加班组弹窗窗体开始 -->
        <el-dialog v-model="addCalTeamDialogVisible" title="添加班组" width="600" align-center>
            <!-- 添加班组的表单 -->
            <el-form label-width="100px" :model="newCalTeam" style="max-width: 460px">

                <el-form-item label="班组编号">
                    <el-input v-model="newCalTeam.teamCode" placeholder="请输入班组编号" />
                    <el-switch @change="autoGenTeamCode" v-model="autoTeamCode" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </el-form-item>

                <el-form-item label="班组名称">
                    <el-input v-model="newCalTeam.teamName" placeholder="请输入班组名称" />
                </el-form-item>
                <el-form-item label="班组类型">
                    <el-select v-model="newCalTeam.calendarType" placeholder="请选择班组类型">
                        <el-option label="注塑" value="注塑" />
                        <el-option label="机加工" value="机加工" />
                        <el-option label="组装" value="组装" />
                        <el-option label="仓库" value="仓库" />
                        <el-option label="后整理" value="后整理" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="newCalTeam.remark" :rows="2" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddCalTeam">取消</el-button>
                    <el-button type="primary" @click="doAddCalTeam">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加班组的弹窗窗体结束 -->


        <!-- 编辑班组弹窗窗体开始 -->
        <el-dialog v-model="editCalTeamDialogVisible" title="修改班组" width="800" align-center>

            <!-- 1.编辑班组的表单开始 -->
            <el-form label-width="100px" :model="editCalTeam" style="max-width: 460px">

                <el-form-item label="班组编号">
                    <el-input v-model="editCalTeam.teamCode" />
                    <el-switch @change="autoGenTeamCode" v-model="autoTeamCode" class="ml-2"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </el-form-item>

                <el-form-item label="班组名称">
                    <el-input v-model="editCalTeam.teamName" />
                </el-form-item>

                <el-form-item label="班组类型">
                    <el-select v-model="editCalTeam.calendarType">
                        <el-option label="注塑" value="注塑" />
                        <el-option label="机加工" value="机加工" />
                        <el-option label="组装" value="组装" />
                        <el-option label="仓库" value="仓库" />
                        <el-option label="后整理" value="后整理" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="editCalTeam.remark" :rows="2" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <!-- 编辑班组的表单结束 -->

            <!-- 2.项目组成员的表单开始 -->
            <el-divider content-position="center">项目组成员</el-divider>
            <!-- 2.1工具栏开始 -->
            <div class="flex">
                <el-button @click="this.addCalTeamMemberDialogVisible = true" type="primary" plain>
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增
                </el-button>
                <el-button @click="deleteCalTeamMembers" type="danger" plain>
                    <el-icon>
                        <Delete />
                    </el-icon>
                    删除
                </el-button>
                <el-button type="warning" @click="exportCalTeamMembers" plain>
                    <el-icon>
                        <Download />
                    </el-icon>
                    导出
                </el-button>
            </div>
            <!-- 2.1工具栏结束 -->

            <!-- 2.2表格 开始 -->
            <el-table ref="calTeamMemberTable" :data="calTeamMembers" max-height="800px" stripe="true" border="true"
                style="width: 90%;margin-top: 10px;">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" label="用户ID" property="memberId" />
                <el-table-column align="center" label="用户名" property="userName" />
                <el-table-column align="center" label="用户昵称" property="nickName" />
                <el-table-column align="center" label="电话" property="tel" />
                <el-table-column width="150" align="center" label="操作">
                    <template #default="scope">
                        <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                            @confirm="handleDeleteTeamMember(scope.row)" title="您是否要删除这行数据">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 2.2表格 结束 -->
            <!-- 2.项目组成员的表单结束 -->

            <!-- 分页栏开始 -->
            <el-pagination style="margin-top: 15px;" :page-size="calTeamMemberLimit" :pager-count="calTeamMemberCurrPage"
                @current-change="calTeamMemberChangePage" background layout="prev, pager, next"
                :total="calTeamMemberTotal" />
            <!-- 分页栏结束 -->


            <!-- 添加班组成员弹窗开始 -->
            <el-dialog v-model="addCalTeamMemberDialogVisible" title="人员选择" align="center" width="1000" align-center>
                <!--  搜索栏开始 -->
                <el-form style="margin-top: 15px;" :inline="true" :model="queryCalUser" class="demo-form-inline">
                    <el-form-item label="用户名">
                        <el-input v-model="queryCalUser.userName" placeholder="请输入用户名称" clearable />
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="queryCalUser.tel" placeholder="请输入手机号码" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loadCalUsers"><el-icon>
                                <Search />
                            </el-icon>搜索</el-button>
                        <el-button @click="clearCalUser"><el-icon>
                                <Refresh />
                            </el-icon>重置</el-button>
                    </el-form-item>
                </el-form>
                <!--  搜索栏结束 -->

                <!-- 班组表格 开始 -->
                <el-table ref="calUserTable" :data="calUsers" max-height="800px" stripe="true" border="true"
                    style="width: 90%;margin-top: 10px;">
                    <el-table-column align="center" type="selection" width="55" />
                    <el-table-column align="center" label="用户编号" property="userId" />
                    <el-table-column align="center" label="用户名称" property="userName" />
                    <el-table-column align="center" label="用户昵称" property="nickName" />
                    <el-table-column align="center" label="部门" property="departmentName" />
                    <el-table-column align="center" label="手机号码" property="tel" />
                    <el-table-column label="状态" property="userStatus">
                        <!-- Tag 标签 -->
                        <template #default="scope">
                            <!-- scope.row 就是整行数据-->
                            <el-tag v-if="scope.row.userStatus == 1" class="ml-2" type="success">正常</el-tag>
                            <el-tag v-else class="ml-2" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" :formatter="timeFormatter" property="calUserCreateTimeMillis" />
                </el-table>
                <!-- 班组表格 结束 -->
                <!-- 分页栏开始 -->
                <el-pagination style="margin-top: 15px;" :page-size="calUserLimit" :pager-count="calUserCurrPage"
                    @current-change="calUserchangePage" background layout="prev, pager, next" :total="calUserTotal" />
                <!-- 分页栏结束 -->

                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancelAddCalUser">取消</el-button>
                        <el-button type="primary" @click="doAddCalUser">确定</el-button>
                    </span>
                </template>

            </el-dialog>
            <!-- 添加班组成员弹窗结束 -->

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelEditCalTeam">取消</el-button>
                    <el-button type="primary" @click="doCalTeamEdit">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑班组的弹窗窗体结束 -->


    </div>
</template>
<script>
import calTeamRequest from '../../../api/cal-team-api.js';
import calTeamMemberRequest from '../../../api/cal-team-member-api.js';
import calUserRequest from '../../../api/cal-user-api.js';
import tools from '../../../util/tools.js';
export default {
    data() {
        return {
            //班组列表展示相关属性
            queryCalTeam: {},
            calTeams: [],
            calTeamCurrPage: 1, // 字典分页的当前页码
            calTeamLimit: 10, // 字典分页的每页大小
            calTeamTotal: 0, // 字典列表的总条数
            calTeamMaxPage: 1,// 字典列表的最大页码
            teamId: null,

            //添加班组相关属性
            addCalTeamDialogVisible: false,
            newCalTeam: {
                teamCode: undefined
            },
            autoTeamCode: false,


            //编辑班组信息所需要的属性
            editCalTeamDialogVisible: false,
            editCalTeam: {},


            //班组成员列表展示
            queryCalTeamMember: {},
            calTeamMembers: [],
            calTeamMemberChangePage: 1,
            calTeamMemberLimit: 10,
            calTeamMemberTotal: 0,
            calTeamMemberMaxPage: 1,

            //添加班组成员相关属性
            addCalTeamMemberDialogVisible: false,
            queryCalUser: {},
            calUsers: [],
            calUserCurrPage: 1, // 字典分页的当前页码
            calUserLimit: 10, // 字典分页的每页大小
            calUserTotal: 0, // 字典列表的总条数
            calUserMaxPage: 1,// 字典列表的最大页码

        };
    },
    methods: {
        // 添加班组成员相关事件

        /**
         * 添加班组成员相关事件
         */
        /**
         * 1.确定添加班组成员按钮
         */
         doAddCalUser() {
            // 获取表格对象
            let table = this.$refs.calUserTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个数组
            let userIds = [];
            selectionRows.forEach(calUser => {
                userIds.push(calUser.userId);
            });
            // 调用API进行添加
            calTeamMemberRequest.adds(userIds, this.teamId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "添加成功"
                    });
                    this.loadCalTeamMembers();
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "添加失败"
                    });
                }
                this.loadCalUsers();
            });

            this.loadCalTeamMembers();
            this.addCalTeamMemberDialogVisible = false;
        },
        /**
         * 2.取消添加班组成员按钮
         */
        cancelAddCalUser() {
            this.addCalTeamMemberDialogVisible = false;
            this.loadCalTeamMembers();
        },


        /**
         * 班组成员列表展示
         */
        /**
         * 1.现有用户数据展示
         */
         loadCalUsers() {
            calUserRequest.list(this.calUserCurrPage, this.calUserLimit, this.queryCalUser, res => {
                // 设置数据
                this.calUsers = res.data.list;
                this.calUserTotal = res.data.total;
                this.calUserMaxPage = res.data.pages;
            });
        },
        /**
         * 2.用户字典列表的翻页函数
         */
        calUserchangePage(value) {
            this.calUserCurrPage = value;
            this.loadCalUsers();
        },
        /**
         * 3.用户重置搜索
         */
        clearCalUser() {
            this.queryCalUser = {};
            this.loadCalUsers();
        },
        /**
         * 4.格式化表格中时间的函数,毫秒数转换为年月日
         */
         timeFormatter(row, column, cellValue, index) {
            console.log(cellValue);
            let date = new Date();
            // 设置时间
            date.setTime(cellValue);
            // 转换时间，并且返回
            return (
                date.getFullYear() +
                "-" +
                (date.getMonth() + 1) +
                "-" +
                date.getDate() +
                " " +
                date.getHours() +
                ":" +
                date.getMinutes() +
                ":" +
                date.getSeconds()
            );
        },



        /********************************************************************* */

        /**
         * 工具栏-班组成员导出按钮事件 
         */
        exportCalTeamMembers() {
            // 获取表格对象
            let table = this.$refs.calTeamMemberTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            } else {
                this.$message({
                    type: "error",
                    message: "下载文件出现错误,请联系管理员!"
                });
            }
        },


        /**
         * 删除班组成员相关事件
         */
        /**
         * 1.行编辑按钮-删除按钮事件
         */
        handleDeleteTeamMember(row) {
            calTeamMemberRequest.delete(row.memberId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadCalTeamMembers();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
         * 2.工具栏-批量删除按钮事件
         */
        deleteCalTeamMembers() {
            // 获取表格对象
            let table = this.$refs.calTeamMemberTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个要删除的数组
            let memberIds = [];
            selectionRows.forEach(calTeamMember => {
                memberIds.push(calTeamMember.memberId);
            });
            // 调用API进行删除
            calTeamMemberRequest.deletes(memberIds, res => {
                this.$message({
                    type: "success",
                    message: "成功的删除了" + res.msg + "条数据"
                });
                this.loadCalTeamMembers();
            });
        },


        /**
         * 班组成员列表展示
         */
        /**
         * 1.加载班组成员数据
         */
        loadCalTeamMembers() {
            // 分页查询与当前正在编辑的班组的班组id对应的班组成员信息
            // 班组成员中的班组id就是当前编辑的班组id
            this.queryCalTeamMember.teamId = this.teamId;
            calTeamMemberRequest.list(this.calTeamMemberChangePage, this.calTeamMemberLimit, this.queryCalTeamMember, res => {
                // 设置数据
                this.calTeamMembers = res.data.list;
                this.calTeamMemberTotal = res.data.total;
                this.calTeamMemberMaxPage = res.data.pages;
            });
        },
        /**
         * 2.班组成员字典列表的翻页函数
         */
        calTeamMemberChangePage(value) {
            this.calTeamMemberCurrPage = value;
            this.loadCalTeamMembers();
        },
        /**
         * 3.班组成员重置搜索
         */
        clearCalTeam() {
            this.queryCalTeamMember = {};
            this.loadCalTeamMembers();
        },



        /************************************************************************************************ */



        /**
         * 班组导出事件按钮
         */
        exportCalTeam() {
            // 获取表格对象
            let table = this.$refs.calTeamTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            } else {
                this.$message({
                    type: "error",
                    message: "下载文件出现错误,请联系管理员!"
                });
            }
        },

        /**
         * 编辑班组相关事件
         */
        /**
         * 1.行编辑按钮事件-编辑按钮
         */
        handleEdit(row) {
            //通过id加载要编辑的班组信息
            calTeamRequest.get(row.teamId, res => {
                //将查询的班组信息设置到editCalTeam中
                this.editCalTeam = res.data;
                //显示弹窗
                this.editCalTeamDialogVisible = true;
            });
            // 将当前要编辑的班组的id存储起来
            this.teamId = row.teamId;
            // 在编辑班组信息的同时加载班组成员信息
            this.loadCalTeamMembers();
            this.loadCalUsers();
        },
        /**
         * 2.取消行编辑按钮事件
         */
        cancelEditCalTeam() {
            //将编辑内容的制空
            this.editCalTeam = {};
            //关闭弹窗
            this.editCalTeamDialogVisible = false;
        },
        /**
         * 3.行编辑按钮提交事件
         */
        doCalTeamEdit() {
            //提交editCalTeam即可
            calTeamRequest.edit(this.editCalTeam, res => {
                //这里的res就是后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑成功',
                        type: 'success',
                    });
                    //关闭编辑弹窗
                    this.editCalTeamDialogVisible = false;
                    //重新加载班组列表数据
                    this.loadCalTeams();
                    //将editCalTeam制空
                    this.editCalTeam = {};

                } else if (res.code == '300') {
                    this.$message({
                        message: '班组名称重复',
                        type: 'warning',
                    });

                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 4.批量编辑按钮事件
         */
        handlerEdits() {
            // 获取表格对象
            let table = this.$refs.calTeamTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            } else if (selectionRows.length > 1) {
                this.$message({
                    type: "info",
                    message: "只能修改一个班组信息"
                });
            } else {
                // 获取第一行数据
                let row = selectionRows[0];
                // 调用行编辑事件
                this.handleEdit(row);
            }

        },


        /**
         * 删除班组相关事件
         */
        /**
         * 1.行编辑按钮事件-删除按钮
         */
        handleDelete(row) {
            calTeamRequest.delete(row.teamId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadCalTeams();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
         * 2.工具栏-批量删除的工具按钮事件
         */
        deleteCalTeams() {
            // 获取表格对象
            let table = this.$refs.calTeamTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个要删除的数组
            let teamIds = [];
            selectionRows.forEach(calTeam => {
                teamIds.push(calTeam.teamId);
            });
            // 调用API进行删除
            calTeamRequest.deletes(teamIds, res => {
                this.$message({
                    type: "success",
                    message: "成功的删除了" + res.msg + "条数据"
                });
                this.loadCalTeams();
            });
        },


        /**
         * 添加班组相关事件
         */
        /**
         * 1.添加班组的提交按钮事件
         */
        doAddCalTeam() {
            calTeamRequest.save(this.newCalTeam, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddCalTeam();
                    // 重新加载数据
                    this.loadCalTeams();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 2.取消添加班组的按钮事件
         */
        cancelAddCalTeam() {
            // 关闭窗体
            this.addCalTeamDialogVisible = false;
            // 清空newCalTeam
            this.newCalTeam = {};
        },



        /**
         * 自动生成生产工单编号
         * @param {*} val
         */
        autoGenTeamCode(val) {
            if (val) {
                calTeamRequest.autoTeamCode(res => {
                    this.newCalTeam.teamCode = res.data;
                });
            }
        },


        /**
         * 班组列表展示相关事件
         */
        /**
         * 1.加载班组数据
         */
        loadCalTeams() {
            calTeamRequest.list(this.calTeamCurrPage, this.calTeamLimit, this.queryCalTeam, res => {
                // 设置数据
                this.calTeams = res.data.list;
                this.calTeamTotal = res.data.total;
                this.calTeamMaxPage = res.data.pages;
            });
        },
        /**
         * 2.字典列表的翻页函数
         */
        changePage(value) {
            this.calTeamCurrPage = value;
            this.loadCalTeams();
        },
        /**
         * 3.重置搜索
         */
        clearCalTeam() {
            this.queryCalTeam = {};
            this.loadCalTeams();
        }


    },
    mounted() {
        this.loadCalTeams();
    }

}
</script>
<style scoped></style>